<template>
  <div id="myservicecenter" style="position: relative;">
    <c-title :hide="false" text="服务中心"></c-title>
    <div class="background_box"></div>
    <div style="padding: 2.5938rem 0.625rem 0;">
      <div style="border-radius: 16px 16px 0 0 ; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1rem 0; ">
      <div>总业绩</div>
      <div style="font-size: 1.3rem;">{{ order_total_price }}</div>
    </div>
    <van-tabs style="flex: 1;" v-model="activeName" @click="handleClick">
      <van-tab name="day" title="当日"></van-tab>
      <van-tab name="month" title="本月"></van-tab>
      <van-tab name="lastmonth" title="上月"></van-tab>
    </van-tabs>
    <div class="list_box">
      <div class="list" v-for="(item, index) in new_content" :key="index">
        <div class="list_top">
          <div class="header_left">
            <!-- <div class="img">
              <img :src="item.avatar" />
              <div v-if="item.inviter == 1" style="position: absolute; right: 1px; bottom: -1px;">
                <img src="../../../assets/images/temporary@2x.png" style="width: 1rem; height: 1rem;" />
              </div>
            </div> -->

            <ul class="name">
              <li style="">
                <div
                  style="float: left; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ">
                  {{ item.mobile }}
                </div>
                <div style="margin-left: 10px;float: left; color: #f15353;"> {{ item.title }}</div>
                <!-- <div class="member-id" style="float: left; color:#fff;">
                  {{ item.uid }}
                </div> -->
              </li>
              <li style="color: #333; font-size: 0.75rem; line-height: 1.2rem;">
                业绩金额: {{ item.price }}{{ $i18n.t("元") }}
              </li>
              <li>
                {{ item.create_date }}
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="order_info">
          <ul class="order_number">
            <li>订单数：{{ item.child_order_total }}个</li>
            <li>{{ name }}数量：{{ item.team_total }}个</li>
          </ul>
          <ul class="order_sum">
            <li>订单总额：{{ item.child_order_money }}{{ $i18n.t("元") }}</li>
            <li>{{ name }}订单：{{ item.team_order_money }}{{ $i18n.t("元") }}</li>
            
          </ul>
        </div> -->
      </div>
    </div>
    </div>
    <!-- </mt-tab-container-item> -->
  </div>

</template>

<script>
import my_service_center from "./my_service_center";

export default my_service_center;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#myservicecenter {
  .background_box {
    color: #382c0a;
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
    background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
    background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
    min-height: 12.125rem;
    padding: 1.5938rem 1.0938rem 0 1.0938rem;
    position: absolute;
    z-index: -1;
    width: 100%;
  }
  .list_box {
    .list {
      background-color: #fff;
      // margin-bottom: 0.625rem;

      .list_top {
        padding: 0.75rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 0.0625rem #ebebeb;

        .header_left {
          padding-left: 0.75rem;
          display: flex;

          .img {
            position: relative;
            width: 2.8rem;
            height: 2.8rem;
            // border-radius: 1.25rem;
            overflow: hidden;
            margin-right: 0.625rem;

            img {
              // width: 100%;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 1.25rem;
            }
          }

          .name {
            text-align: left;
            width: 12rem;

            li:first-child {
              font-size: 16px;
              color: #333;
              line-height: 1.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            li:last-child {
              font-size: 14px;
              color: #8c8c8c;
              line-height: 1rem;
            }

            .member-id {
              display: inline-block;
              padding: 0 0.5rem;
              margin-left: 0.5rem;
              color: #f15353;
              background: #ffe4dc;
              line-height: 20px;
              font-size: 13px;
              border-radius: 1rem;
            }
          }
        }

        .header_right {
          padding-right: 0.625rem;
          display: flex;

          .Wechat,
          .phone,
          .news {
            width: 2.5rem;
            height: 2.5rem;

            img {
              width: 1.75rem;
              margin-top: 0.375rem;
            }
          }
        }
      }

      .order_info {
        padding: 0.625rem 0;
        display: flex;

        .order_number,
        .order_sum {
          width: 50%;
          text-align: left;

          li {
            line-height: 1.625rem;
            font-size: 14px;
            padding: 0 0.625rem;
          }
        }
      }
    }
  }
}
</style>
